<template>
  <div id="login" class="loginContainer">
    <!--    <a-alert message="Warning" type="warning" show-icon />-->
    <div class="loginMainWrapper">
      <div class="loginWrapper">
        <div class="loginBoxWrapper">
          <!-- 改为a-form -->
          <a-form :model="user" :rules="rules" @submit="handleSubmit" @submit.native.prevent>
            <a-form-item style="text-align: center">
              <h1>至减管理系统</h1>
            </a-form-item>
            <a-form-item name="user">
              <a-input v-model:value="user.user" placeholder="账号" class="xiala">
                <template #prefix>
                  <UserOutlined/>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="password">
              <a-input v-model:value="user.password" type="password" placeholder="密码" class="xiala">
                <template #prefix>
                  <LockOutlined/>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="code">
              <div style="display: flex">
                <a-input
                    v-model:value="user.code"
                    placeholder="请输入验证码"
                    class="xiala"
                    :status="codeError ? 'error' : ''"
                >
                  <template #prefix>
                    <LoginOutlined/>
                  </template>
                </a-input>
                <valid-code @update:value="getCode" style="margin-top: 15px; height: 18px"/>
              </div>
              <span v-if="codeError" style="color: red;">验证码错误</span>
            </a-form-item>
                        <a-form-item>
                          <div class="rememberMeWrapper">
                            <a-checkbox-group v-model:value="user.resource" class="xiala">
                              <a-checkbox value="true" name="type">记住密码</a-checkbox>
                            </a-checkbox-group>
                          </div>
                        </a-form-item>
            <a-button class="ant-btn" type="primary" :size="size" @click="handleSubmit">登录</a-button>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Modal} from "ant-design-vue";
import {ref, reactive, watch} from "vue";
import {UserOutlined, LockOutlined, LoginOutlined} from "@ant-design/icons-vue";
import {useRouter} from 'vue-router';
import myaxios from "../Axios/myaxios";
import ValidCode from "../components/ValidCode.vue";

const user = reactive({
  user: "",
  password: "",
  resource: [],
  code: "",
});
const router = useRouter();
const code = ref("");
const codeError = ref(false);
const getCode = (newCode) => {
  code.value = newCode.toLowerCase();
};
const message = ref('')

watch(
    () => user.code,
    (newCode) => {
      if (newCode.length === 0) {
        codeError.value = false;
      } else if (!code.value.startsWith(newCode.toLowerCase())) {
        codeError.value = true;
      } else {
        codeError.value = false;
      }
    }
);

const rules = ref({
  user: [
    {required: true, message: '请输入账号', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'}
  ],
});

const handleSubmit = async () => {

  if (!user.user || !user.password ) {
    Modal.warning({
      title: '提示',
      content: '请输入账号密码',
    });
  }
  else if (user.code !== code.value) {
    Modal.warning({
      title: '提示',
      content: '您的验证码不对',
    });
  }
  else {
    // 使用 axios 发起请求，不再需要动态创建 <script> 标签
    await myaxios.get('/wx/adminLogin', {
      params: {
        account: user.user,     // 传递账号
        passWord: user.password // 传递密码
      }
    }).then(response => {
      if (response.message === '账号或密码错误') {
        Modal.warning({
          title: '提示',
          content: '账号或密码错误',
        });
      } else {
        router.push('/');
        console.log("我成功了");
        // 将服务器返回的 response 存入 localStorage
        localStorage.setItem('ZJ-admin', JSON.stringify(response.data));
        // 跳转到首页

      }


    }).catch(error => {
      console.error("请求失败:", error);
    });
  }


};
</script>


<style scoped>


body {
  margin: 0;
  padding: 0;
}

.loginContainer {
  margin-bottom: 10px !important; /* 或其他值 */
  width: 100%;
  position: relative;
  background: url('https://img.zcool.cn/community/01237c5bf51747a80121ab5d5d9a70.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: center;
  padding-top: 105px;
  min-height: 100%;
  height: 100vh;
}

.loginHeader {

  width: 100%;
  height: 64px;
  background-color: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding: 10px;
}

.loginHeader span {
  margin: 0 auto;
  font-size: 25px;
  font-weight: 700;
}

.loginMainWrapper {
  width: 100%;
  display: flex;
  margin: 105px auto;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.loginWrapper {
  width: 90%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  height: 100%;
}

.loginFooter {
  width: 100%;
  min-height: 64px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  text-align: center;
  color: #ffffff;
  margin-top: 40px;
}

.siteSummary ul {
  list-style: none;
  padding: 0;
}

.siteSummary ul li {
  margin-top: 10px;
  list-style: none;
}

.siteSummaryTitle {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
}

.siteSummary {
  margin-top: 25px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 300;
}

.rememberMeWrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.loginBoxWrapper {
  background-color: #ffffff;
  padding: 20px;
  width: 350px; /* Adjusted size */
  height: 100%;
  border-radius: 5px;
}

/* Responsive for larger screens */
@media screen and (min-width: 1200px) {
  .loginTipsWrapper {
    padding: 20px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    min-height: 100%;
  }
}

/* Responsive for medium screens */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .loginTipsWrapper {
    padding: 20px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }
}

/* Responsive for smaller screens */
@media screen and (max-width: 768px) {
  .loginTipsWrapper {
    display: none;
  }

  .loginBoxWrapper {
    background-color: #ffffff;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
  }
}

/* Button size adjustment */
.ant-btn {
  width: 100%;
  padding: -10px;
  font-size: 1rem;
  margin-top: -8px;
}
</style>
